<template>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="账号信息" name="first">
        <el-form :model="form">
      <el-form-item label="日期" :label-width="formLabelWidth">
        <el-input v-model="form.date1" autocomplete="off" />
      </el-form-item>
      <el-form-item label="名字" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
      <el-form-item label="地址" :label-width="formLabelWidth">
        <el-input v-model="form.state" autocomplete="off" />
        </el-form-item>
      <el-form-item label="城市" :label-width="formLabelWidth">
        <el-input v-model="form.city" autocomplete="off" />
        </el-form-item>
        <el-form-item label="邮编" :label-width="formLabelWidth">
        <el-input v-model="form.address" autocomplete="off" />
      </el-form-item>
    </el-form>
      </el-tab-pane>
      <el-tab-pane label="分配角色" name="second">
        <el-transfer v-model="value" :data="data" 
        :titles="['所有角色', '已有角色']"
        />

      </el-tab-pane>

    </el-tabs>
    
  </template>
  <script lang="ts" setup>
  import { ref,reactive } from 'vue'
  import type { TabsPaneContext } from 'element-plus'
  
  const activeName = ref('first')
  const formLabelWidth = '50px'
const form = reactive({
    date1: '',
    name: '',
    state: '',
    city: '',
    address: '',
    region: ''
})
  
  const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
  }
  interface Option {
  key: number
  label: string
  initial:string
}

const generateData = () => {
  const data: Option[] = []
  const states = ['超级管理员', '管理', '服务']
  const initials = ['CA', 'FL', 'NY', 'TX', 'WA']
  states.forEach((city, index) => {
    data.push({
      key: index,
      label: city,
      initial: initials[index]
    })
  })
  return data
}



const data = ref<Option[]>(generateData())
const value = ref([])
const filterMethod = (query, item) => {
  return item.label.toLowerCase().includes(query.toLowerCase())
}
  </script>
  
  <style>
  .demo-tabs > .el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
  }
  </style>